<template>
  <div>
<van-nav-bar class='title'  title="账号注册"   left-arrow   @click-left="$router.back()"/>
<van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="username"
    placeholder="请输入账号"
    :rules="[{ required: true, message: '请填写账号' },
      { pattern: /^\w{6,}$/, message: '用户名至少包含6个字符'}
    ]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    placeholder="请输入密码"
    :rules="[{ required: true, message: '请填写密码' },
    {pattern:/^\w{6,}$/,message: '密码至少为6个字符串'}
    ]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" id='login'>登录</van-button>
  </div>
</van-form>

    <router-link class="link" to="/login">去登录~</router-link>
  </div>
</template>

<script>
export default {
  name: 'HaokeLogin',

  data () {
    return {
      username: '',
      password: ''

    }
  },

  mounted () {

  },

  methods: {
    onSubmit () {}

  }
}
</script>

<style  lang="less" scoped>
.link{
  color: #666666;
  font-size: 12px;
  display: block;
  text-align: center;
  margin: 0 auto;
}
#login{
  background-color: #56b27b;
}
.title{
  background-color:#56b27b ;

}
/deep/ .van-nav-bar__title{
  color: #fff;
}
/deep/ .van-nav-bar__left .van-icon{
  color: #fff;
}
.van-cell{
  height: 80px;
  font-size: 17px;
  border-bottom: 1px solid #DDDDDD;
}
.van-field{
  padding-top: 28px;
  .van-field__body{
  height: 60px;
  }
}
</style>
